$(function() {
  // 模块框事件
  $("#addBtn").click(function() {
    $("#addModal").modal("show");
  });
  // 表单聚焦事件
  $("#addModal").on("shown.bs.modal", function(e) {
    //模态框的ID
    $("#firstCategory").focus(); //通过ID找到对应输入框，让其获得焦点
  });

  // 渲染数据
  var currentPage = 1;
  var pageSize = 5;
  function render() {
    $.ajax({
      url: "/category/queryTopCategoryPaging",
      data: {
        pageSize,
        page: currentPage
      },
      dataType: "json",
      success: function(res) {
        console.log(res);
        $("tbody").html(template("tmp", res));
        paging(res.total);
      }
    });
  }
  render();

  // 分页
  function paging(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      size: "small", //设置控件的大小，mini, small, normal,large
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        console.log(page);
        currentPage = page;
        render();
      }
    });
  }

  // 初始化表单校验插件
  $("#form-validater").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled", ":hidden", ":not(:visible)"],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      categoryName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "分类名不能为空"
          }
        }
      }
    }
  });
  // 注册表单数据合理提交给服务器的事件
  $("#form-validater").on("success.form.bv", function(e) {
    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
      type: "POST",
      url: "/category/addTopCategory",
      data: $("#firstCategory").serialize(),
      dataType: "json",
      success: function(res) {
        console.log(res);
        $("#addModal").modal("hide");
        render();
        $("#form-validater")
          .data("bootstrapValidator")
          .resetForm(true);
      }
    });
  });
});
